<!--
* @author: XJC
* @date: 2023-11-23 11:37
* @description：index
* @update: 2023-11-23 11:37
-->
<template>
  <div class="user-home">
    <vue-seamless-scroll
      :data="scrollInfo"
      :class-option="optionLeft"
      style="height: 70px"
      :class="scrollInfo.length > 0 ? 'marquee-wrap' : ''"
    >
      <div class="marquee">
        <div class="marquee-item" v-for="(item, i) in scrollInfo" :key="i">
          <img src="~@/assets/img/warning-icon.png" alt="" class="warnIcon" />
          {{ item.title }}
        </div>
      </div>
    </vue-seamless-scroll>
    <div class="menu flex flex-wrap flex-space-between">
      <!-- 智能货架 -->
      <div class="menu-item menu-item-1" @click="goPage('/smartShelf')">
        <div class="dataBox">
          <div
            class="numBox"
            v-for="(item,index) in totalList.shelvesCount"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 物料信息 -->
      <div class="menu-item menu-item-2" @click="goPage('/materialInfo')">
        <div class="dataBox">
          <div class="numBox" v-for="(item,index) in totalList.goodsCount" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 任务清单 -->
      <div class="menu-item menu-item-3" @click="goPage('/taskInfo')">
        <div class="dataBox">
          <div class="numBox" v-for="(item,index) in totalList.taskCount" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 出入库记录 -->
      <div class="menu-item menu-item-4" @click="goPage('/entryExitRecords')">
        <div class="dataBox">
          <div class="numBox" v-for="(item,index) in totalList.inoutCount" :key="index">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div style="padding: 0 20px 60px">
      <div class="shelf-status">
        <div class="shelf-status-top">
          <div class="title">货架状态</div>
          <div class="normal-data">连接正常：{{ connectNormalNum }}</div>
          <div class="abnormal-data">连接异常：{{ connectWarnNum }}</div>
        </div>
        <div class="shelf-status-content">
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in statusItem" :key="index">
              <div class="status-item">
                <div class="status-item-left">
                  <img src="@/assets/img/goods-shelves-icon.png" alt="" />
                </div>
                <div class="status-item-right">
                  <div class="title">{{ item.name }} - {{item.code}}</div>
                  <div
                    class="content"
                    :class="item.lineStatus ? 'status-1' : 'status-0'"
                  >
                    <div class="status">
                      {{ item.lineStatus ? '连接正常' : '连接异常' }}
                    </div>
                    <div class="ip">{{ item.weighIp }}</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getWarnRecordList,
  getQueryStatisticsApi,
  getGoodsShelvesInfo
} from '@/api/home.js'

import { EventBus } from '@/utils/eventBus'

import {getCountdown} from "@/utils/auth";
export default {
  name: 'index',
  components: {},
  data() {
    return {
      // 报警轮播列表
      scrollInfo: [],
      // 统计数据
      totalList: {},
      // 货架状态列表
      statusItem: [],
      leaveTimer: null
    }
  },
  // 计算属性（类似于data概念）
  computed: {
    // 控制报警轮播
    optionLeft() {
      return {
        direction: 2, // 滚动方向
        limitMoveNum: 2,
        step: 0.5 // 滚动速度
      }
    },
    // 连接正常数量
    connectNormalNum() {
      let arr = this.statusItem.filter((ele) => ele.lineStatus)
      return arr.length
    },
    // 连接异常数量
    connectWarnNum() {
      let arr = this.statusItem.filter((ele) => ele.lineStatus)
      return this.statusItem.length - arr.length
    }
  },

  // 过滤器
  filters: {},

  // 监视器（监视data中的数据变化）
  watch: {},

  // 方法合集
  methods: {

    async refreshData() {
      console.log("---- 刷新了内容 ");
      // 刷新数据的逻辑
      // 获取历史库存记录列表
      let { result: warn } = await getWarnRecordList({ status: 0 });
      this.$set(this, 'scrollInfo', warn); // Use $set to ensure reactivity

      // 获取统计数据
      let { result: total } = await getQueryStatisticsApi();
      console.log(total);
      this.$set(this, 'totalList', { ...this.totalList, ...total }); // Merge new data
      window.location.reload();
  //    this.totalList = total;
      // 获取货架状态
      //let { result: goodsShellves } = await getGoodsShelvesInfo();
     // this.$set(this, 'statusItem', goodsShellves);

      //this.statusItem = goodsShellves;
    },
    goPage(url) {
      this.$router.push({
        path: url
      })
    },
    async renderList() {
      // 获取历史库存记录列表
      let { result: warn } = await getWarnRecordList({ status: 0 });
      this.scrollInfo = warn;
      // 获取统计数据
      let { result: total } = await getQueryStatisticsApi();
      this.totalList = total;
      // 获取货架状态
      let { result: goodsShellves } = await getGoodsShelvesInfo();
      this.statusItem = goodsShellves;
    },
    // 初始化倒计时
    init() {
      if (this.leaveTimer) {
        clearInterval(this.leaveTimer)
      }
      let that = this
      //获取倒计时时间
      // let countdown = getCountdown() * 1
      // // 将时间戳减去当前时间戳
      // let countTime = countdown - new Date().getTime()
      this.leaveTimer = setInterval(() => {
        // countTime -= 1000
        let { result: warn } = getWarnRecordList({ status: 0 })
        that.scrollInfo = warn

        let { result: goodsShellves } = getGoodsShelvesInfo()
        that.statusItem = goodsShellves
      }, 1000 * 20)
    },
  },

  // 生命周期 - 创建完成（可以访问当前this实例，完成了data 数据的初始化，可以访问data、computed、watch、methods上的方法和数据。但是，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空。）
  created() {
    this.renderList()
    this.init()
    EventBus.$on('refreshHomeData', this.refreshData);


  },
  // 生命周期 - 挂载完成（可以访问DOM元素，一般在此执行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。）
  mounted() {},
  // 生命周期 - 页面数据更新后（页面和数据保持同步）
  updated() {},
  // 生命周期-页面销毁前（在销毁前，实例中所有的data、methods、computed、指令等，都处于可用状态在此阶段，一般进行：关闭定时器、取消订阅消息解绑自定义事件等收尾工作。）
  beforeDestroy() {
    EventBus.$off('refreshHomeData', this.refreshData);
    clearInterval(this.leaveTimer);
  },
  // 生命周期-页面销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
}
</script>

<style scoped lang="scss">
@import '~@/styles/handle';
.user-home {
  width: 100%;
}

.menu {
  width: 100%;
  padding: 20px;

  &-item {
    position: relative;
    width: 49%;
    aspect-ratio: 1.09;
    margin-bottom: 2%;
    overflow: hidden;
    transition: all 0.5s;
    background-size: 100% 100%;
    cursor: pointer;
    .dataBox {
      position: absolute;
      display: flex;
      top: 24%;
      left: 8%;
      .numBox {
        width: 75px;
        height: 94px;
        line-height: 90px;
        text-align: center;
        @include background('home_num_bg_color');
        border-radius: 8px;
        border: 1px solid;
        @include border_color('home_num_border_color');
        font-size: 56px;
        font-family: D-DIN, D-DIN;
        font-weight: 700;
        @include font_color('home_num_box_color');
        text-shadow: 4px 4px 0px rgba(0, 24, 50, 0.74);
        margin-left: 5px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
    &:hover {
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.3);
    }
    &-1 {
      @include home_item('home_item_1');
    }
    &-2 {
      @include home_item('home_item_2');
    }
    &-3 {
      @include home_item('home_item_3');
    }
    &-4 {
      @include home_item('home_item_4');
    }
  }
}

.shelf-status {
  width: 100%;
  padding: 45px 14px 40px;
  @include background('shelf_status_bg_color');
  border: 2px solid;
  @include border_image('shelf_status_border_image');
  transition: all 0.5s;
  -webkit-clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 20%,
    100% 80%,
    calc(100% - 10px) 100%,
    10px 100%,
    0 80%,
    0 20%
  );
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  cursor: pointer;
  &-top {
    display: flex;
    align-items: center;
    padding-left: 25px;
    .title {
      font-size: 44px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      color: #ffffff;
      letter-spacing: 1.5px;
      text-shadow: 4px 4px 0px rgba(0, 24, 50, 0.74);
      margin-right: 24px;
    }
    .normal-data,
    .abnormal-data {
      font-size: 18px;
    }
    .normal-data {
      color: #0ca47e;
    }
    .abnormal-data {
      margin-left: 16px;
      color: #ff1f06;
    }
  }
  &-content {
    // display: flex;
    // flex-wrap: wrap;
    margin-top: 30px;
    padding-right: 10px;
    // width: 100%;
    max-height: 436px;
    overflow-y: auto;
    overflow-x: hidden;
    .el-col-8 {
      margin-bottom: 16px;
    }
    .status-item {
      display: flex;
      align-items: center;
      padding-left: 11%;
      // padding-left: 36px;
      // width: 320px;
      height: 120px;
      // margin-top: 16px;
      // margin-right: 16px;
      @include home_item('home_status_item');
      background-size: 100% 100%;
      &-left {
        width: 26.7%;
        aspect-ratio: 1;
        margin-right: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-right {
        width: 66.3%;
        display: flex;
        height: 66%;
        flex-direction: column;
        justify-content: space-between;
        .title {
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 24px;
        }
        .content {
          font-size: 16px;
          .status {
            margin-bottom: 2px;
          }
        }
      }
      // &:nth-child(-n + 3) {
      //   margin-top: 0;
      // }
      // &:nth-child(3n) {
      //   margin-right: 0;
      // }
    }
  }
  .status {
    &-1 {
      color: #02bc63;
    }
    &-0 {
      color: #ff1f06;
    }
  }
  &:hover {
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.3);
  }
}

.marquee-wrap {
  width: 100%;
  padding-left: 20px;
  overflow: hidden;
  -webkit-clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
  background: linear-gradient(
    270deg,
    rgba(158, 8, 23, 0) 0%,
    rgba(158, 8, 23, 0.41) 100%
  );
  .marquee {
    height: 70px;
    overflow: hidden;
    display: flex;
    align-items: center;
    .marquee-item {
      position: relative;
      background: url('~@/assets/img/warning-bg.png') no-repeat;
      background-size: 100% 100%;
      min-width: 261px;
      height: 40px;
      line-height: 40px;
      padding-left: 40px;
      margin-left: 24px;
      font-size: 18px;
      .warnIcon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -4px;
      }
    }
  }
}
</style>
